<template>
  <div id="login">
    <div class="login-info">
      <h1 class="logo">LOGO</h1>
      <!--      <el-carousel class="login-info__swiper" height="100%" arrow="never">-->
      <!--        <el-carousel-item v-for="banner in banners" :key="banner.id">-->
      <!--          <img :src="banner.url" alt="" />-->
      <!--        </el-carousel-item>-->
      <!--      </el-carousel>-->
      <img alt="老婆" :src="banner" class="login-info__bg" draggable="false" />
      <section class="login-info__form">
        <h1 class="disable-check">管理后台</h1>
        <el-form :rules="loginInfoRules" ref="loginForm" :model="loginInfo">
          <el-form-item prop="name">
            <el-input
              v-model="loginInfo.name"
              @keyup.enter.native="login('loginForm')"
              placeholder="请输入您的用户名/邮箱/手机号"
            >
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="loginInfo.password"
              @keyup.enter.native="login('loginForm')"
              type="password"
              placeholder="请输入您的密码"
            >
            </el-input>
          </el-form-item>
          <el-button
            type="primary"
            @click="login('loginForm')"
            :loading="loading.button"
            >登 录</el-button
          >
          <br />
          <el-button @click="() => this.$message.error('暂不开放该功能')"
            >系统试用</el-button
          >
        </el-form>
        <footer>welcome home</footer>
      </section>
    </div>

    <el-dialog center title="提示" :visible.sync="dialog.show" width="400px">
      <span>系统将会生成一个账号供您体验，所有数据均为测试数据。</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="touristLogin"
          >进入系统</el-button
        >
      </span>
    </el-dialog>

    <svg-icon icon-class="loginBg" class-name="login-bg"></svg-icon>
  </div>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      dialog: {
        show: false
      },
      loading: {
        button: false
      },
      loginInfo: {},
      loginInfoRules: {
        name: [
          {
            required: true,
            type: "string",
            message: "请输入您的账户名",
            trigger: "change"
          }
        ],
        password: [
          {
            required: true,
            type: "string",
            message: "请输入您的密码",
            trigger: "change"
          }
        ]
      },
      banner: require("../../assets/login_bg.jpg")
    };
  },
  methods: {
    /**
     * 游客登录
     */
    touristLogin() {
      this.loginInfo = {
        name: "tourist",
        password: "123456"
      };
      this.login();
    },
    login(formName) {
      if (typeof formName === "string") {
        this.$refs[formName].validate(valid => {
          if (!valid) return;
          this.loginApi();
        });
      } else {
        this.loginApi();
      }
    },
    loginApi() {
      this.loading.button = true;
      this.$store
        .dispatch("Login", this.loginInfo)
        .then(() => {
          // TODO 如果是浏览是强迫退出，二次登录后是否跳转回原页面而不是首页
          this.$router.push("/admin");
          this.$message.success("登陆成功");
          this.loading.button = false;
        })
        .catch(() => {
          this.loading.button = false;
        });
    }
  }
};
</script>

<style lang="scss" scoped>
$loginBoxHeight: 500;
#login {
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: absolute;
  background: #fcfcfc;
}
.login-info {
  background: transparent;
  position: relative;
  width: 900px;
  height: #{$loginBoxHeight}px;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -30%);
  box-shadow: 0 20px 80px 0 rgba(0, 0, 0, 0.3);
  z-index: 99;
  @at-root {
    .login-info__swiper {
      width: 450px;
      /*height: #{$loginBoxHeight}px;*/
      height: 100%;
      display: inline-block;
      vertical-align: middle;
      /*position: absolute;*/
      /*right: 0;*/
      /*top: 0;*/
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .login-info__form {
      vertical-align: middle;
      width: 450px;
      height: #{$loginBoxHeight}px;
      display: inline-block;
      background: rgba(255, 255, 255, 0.9);
      border-radius: 3px 0 0 3px;
      h1 {
        color: #999;
        text-align: center;
        font-size: 16px;
        font-weight: normal;
        margin-top: 50px;
        margin-bottom: 20px;
        letter-spacing: 0.25em;
      }
      form {
        margin: 0 auto;
        width: 80%;
      }
      button {
        width: 100%;
        display: block;
        &:nth-of-type(1) {
          margin-top: 30px;
        }
      }
      footer {
        color: #2581e2;
        text-align: center;
        margin-top: 50px;
        font-size: 24px;
      }
    }
  }
}
.login-info__bg {
  width: 50%;
  height: 100%;
  object-fit: cover;
  vertical-align: middle;
  user-select: none;
}
.el-carousel__button {
  background: #2581e2;
}
.logo {
  width: 215px;
  height: 60px;
  position: absolute;
  top: -102px;
  left: 50%;
  margin-left: -108px;
  text-align: center;
}
.svg-icon.login-bg {
  width: 300px;
  height: 300px;
  position: absolute;
  bottom: 0;
  right: 0;
}
</style>
